<template>
  <div class="b-person">
    <div class="devices-icon" v-show="showBox">
      <span class="iconfont icon-renyuan"></span>
      <span class="devices-icon-num">{{ personList.length }}人</span>
    </div>

    <div class="devices-body">
      <div class="devices-body-name">
        {{ info.name }}
      </div>
      <div class="devices-content">
        <div class="devices-content-person">
          <div class="devices-content-person-item" @mousedown="showPersonDialog(item)" v-for="item in personList"
            :key="item.cdCode">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>

    <div class="device-line"></div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useDialog } from '@/hooks/useDialog'
import PersonDetails from '@/views/DataView/person/personDetails/personDetails.vue'
import { useActiveObject } from '@/store/activeObject';
import { storeToRefs } from 'pinia';
import { usePersonStore } from '@/store/person';
import { useAuthStore } from '@/store/auth';

const props = defineProps({
  info: {
    type: Object,
    reqiured: true
  }
})

const authStore = useAuthStore()
const { modeParams, historyData } = storeToRefs(authStore)
const personStore = usePersonStore()
const { JzStatistics } = storeToRefs(personStore)

const personList = computed(() => {
  if (modeParams.value.model === 'realtime') {
    return JzStatistics.value[props.info.jzNo] || []
  }
  const obj = {}
  historyData.value.personList.forEach((item) => {
    if (obj[item.jzNo]) {
      obj[item.jzNo].push(item);
    } else {
      obj[item.jzNo] = [item]
    }
  })
  return obj[props.info.jzNo] || []
})

const activeObjectStore = useActiveObject()
const { activeFilter, isHistoryTracking } = storeToRefs(activeObjectStore)
const showBox = computed(() => {
  return personList.value.length > 0 && activeFilter.value.includes('person') && !isHistoryTracking.value
})

const { openDialog } = useDialog()
function showPersonDialog (item) {
  openDialog(item.name, PersonDetails, item, {
    width: 800,
    height: 430
  })
}
</script>
<style scoped lang="scss">
.b-person {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease-in-out;

  .devices-icon {
    pointer-events: all;
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(8px * var(--viewScale));
    background: hsl(162deg 93% 38% / 20%);
    padding: calc(8px * var(--viewScale));
    border-radius: calc(22px * var(--viewScale));
    font-size: calc(14px * var(--viewScale));

    .icon-renyuan {
      position: relative;
      padding-right: 8px;

      &::after {
        position: absolute;
        content: '';
        width: 1px;
        height: 80%;
        top: 10%;
        right: 0;
        background: var(--text-color);
        opacity: 0.5;
      }
    }
  }

  &:hover {
    opacity: 1;
    z-index: 9999 !important;
  }

  &:hover .devices-icon {
    font-size: 18px;
  }

  &:hover .devices-body {
    display: flex;
  }

  .devices-body {
    display: none;
    flex-direction: column;
    position: absolute;
    top: -16px;
    left: 50%;
    border-radius: 4px;
    z-index: 2;
    transform: translate(-50%, -100%);
    white-space: nowrap;
    background: #03b87a80;
    font-size: 12px;
    box-shadow: 0 0 5px #000;

    &.active {
      display: flex;
    }

    .devices-body-name {
      color: var(--text-color);
      background-color: rgb(0, 147, 96);
      padding: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .devices-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
      pointer-events: all;
      padding: 4px;

      .devices-content-person {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        width: 160px;
        background: rgb(0, 71, 53);
        padding: 4px;
        box-sizing: border-box;
        overflow: hidden;
        font-size: 10px;
        gap: 8px;

        .devices-content-person-item {
          flex: 1;
          min-width: 30%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          &.isAlarm {
            color: var(--el-color-danger);
          }

          .el-icon {
            margin-left: 8px;
          }
        }
      }
    }
  }

  &:hover .device-line {
    display: block;
  }

  .device-line {
    display: none;
    position: absolute;
    top: -16px;
    left: calc(50% - 12px);
    height: 16px;
    width: 24px;
    padding: 4px 10px;
    border-radius: 50px;
    background: linear-gradient(180.00deg, rgba(0, 255, 167, 0.97), rgba(0, 247, 189, 0) 100%);
    background-clip: content-box;

    &.active {
      display: block;
    }
  }
}

.success {
  color: var(--el-color-success);
}

.error {
  color: var(--el-color-danger);
}

.warning {
  color: var(--el-color-warning);
}

.icon-jizhan {
  color: #1affb2;
}

.icon-shebeichuanganqi {
  color: #fce310;
}

.icon-shexiangtou {
  color: #55ffef;
}

@keyframes col {
  0% {
    color: var(--el-color-danger);
    transform: scale(1);
    opacity: 1;
  }

  100% {
    color: var(--el-color-danger-light-8);
    transform: scale(3.5);
    opacity: 0;
  }
}
</style>
